import React from 'react';
import Chart from 'echarts-for-react';
import {environmentalEmissionIndicatorsStatistics} from '../../../services/cockpit'

let data = {
    value:[
            {
                series: [
                    {
                        data:[{
                            value : [15000, 10000, 28000, 35000, 50000, 19000,50000],
                            name : '环保排放指标统计数据'
                        }]
                    }
                ],
            },
            {
                series: [
                    {
                        data:[{
                            value : [15000, 30000, 28000, 35000, 50000, 19000,50000],
                            name : '环保排放指标统计数据'
                        }]
                    }
                ],
            },
        ],
    time:['01-01','01-02'],
    indicator: [
        { name: '颗粒物', max: 120},
        { name: '氮氧化物', max: 300},
        { name: '氯化氢', max: 10},
        { name: '一氧化碳', max: 10},
        { name: '扬尘', max: 200},
        { name: '异味', max: 30},
        { name: '噪音', max: 70}
    ]
};

class MyRadar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataList: '',
        };
    }
    componentDidMount() {

        environmentalEmissionIndicatorsStatistics().then(data => {
            let dataList = data.data.ret;
            this.setState({
                dataList
            })
        })
    }
    setOption = () => {
        let myOption;
        let data = this.state.dataList;
        myOption = {
        baseOption: {
            textStyle:{color:'#fff'},
            color:'#3A91B2',
            tooltip: {},
            timeline: {
                top: 220,
                left:20,
                right:20,
                axisType: 'category',
                // realtime: false,
                // loop: false,
                autoPlay: true,
                // currentIndex: 2,
                playInterval: 1000,
                symbol:'circle',
                lineStyle:{
                    color:'#385883'
                },
                label:{color:'#fff'},
                itemStyle:{
                    color:'#385883'
                },
                checkpointStyle:{
                    color:'#fff',
                    borderColor:'#385883'
                },
                controlStyle:{
                    color:'#385883'
                },
                data: data.time,
            },
            radar: {
                radius:'58%',
                axisLine:{
                    show:false
                },
                splitLine:{
                    lineStyle:{
                        color:['#2BDDC2','#5BBEF2','#5BBEF2','#5BBEF2'],
                        width:2,
                    },
                },
                splitArea:{
                    show:false
                },
                name: {
                    textStyle: {
                        color: '#fff',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                // indicator: [
                //     { name: '颗粒物', min: 50},
                //     { name: '噪音', min: 60},
                //     { name: '异味', min: 20},
                //     { name: '扬尘', min: 60},
                //     { name: '一氧化氮', min: 3},
                //     { name: '氯化氢', min: 2},
                //     { name: '氮氧化物', min: 120},
                // ],
                // indicator: [
                //     { name: '颗粒物'},
                //     { name: '噪音'},
                //     { name: '异味'},
                //     { name: '扬尘'},
                //     { name: '一氧化氮'},
                //     { name: '氯化氢'},
                //     { name: '氮氧化物'},
                // ],
                indicator:data.indicator,
            },
            series: [{
                type: 'radar',
                tooltip: {
                    trigger: 'item'
                },
                itemStyle: {normal: {areaStyle: {type: 'default'}}},
            }]
        },
        options: data.value
    };
        return myOption;
    };
    render() {
        return (
            <div>
                <Chart
                    option={this.setOption()}
                    notMerge
                    lazyUpdate
                    style={{ height: 270 }}
                />
            </div>
        )
    }
}
export default MyRadar;
